<template>
  <!-- 新建区域 -->
  <div class="NewArea">
    <!-- 页面头部和查询区域 -->
    <div class="NewArea-tittle">
      <div class="crumbs">
        <p>
          <span>资料管理 /</span> <span>楼座管理 /</span> <span> 新建楼座</span>
        </p>
        <h3>新建楼座</h3>
      </div>
    </div>
    <div class="NewArea-content">
      <div class="content-title">
        <span>基础信息</span>
      </div>
      <div class="add">
        <el-form
          require-asterisk-position="right"
          :model="addData"
          :rules="rules"
        >
          <el-form-item label="楼座名称" prop="buildingName">
            <el-input
              clearable
              v-model="addData.buildingName"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="建成日期" prop="completionDate">
            <el-date-picker
              v-model="addData.completionDate"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY-MM-DD hh:mm:ss"
              value-format="YYYY-MM-DD h:m:s"
            />
          </el-form-item>
          <el-form-item label="房屋用途" prop="houseUse">
            <el-select
              v-model="addData.houseUse"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="楼宇面积" prop="buildingArea">
            <el-input
              type="number"
              min="0"
              clearable
              v-model="addData.buildingArea"
              placeholder="请输入"
            />
            <div class="pos">㎡</div>
          </el-form-item>
          <el-form-item label="单元数量" prop="unitsNumber">
            <el-input
              type="number"
              min="0"
              clearable
              v-model="addData.unitsNumber"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="单元楼层数量" prop="numberFloors">
            <el-input
              type="number"
              min="0"
              clearable
              v-model="addData.numberFloors"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item label="备注" style="margin-left: 30px">
            <el-input
              :rows="4"
              type="textarea"
              clearable
              v-model="addData.note"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>

        <div style="padding-left: 75px">
          <el-button type="primary" @click="add">提交</el-button>
          <el-button @click="back">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import http from "../../utils/http";
import { ElMessage } from "element-plus";
import router from "../../router";
import route from "../../router/index";
import { dataType } from "element-plus/es/components/table-v2/src/common";
import type { FormRules } from "element-plus";

const options = [
  {
    value: "住宅",
    label: "住宅",
  },
  {
    value: "商业用地",
    label: "商业用地",
  },
  {
    value: "商住都可",
    label: "商住都可",
  },
];

let addData = reactive({
  buildingName: "",
  completionDate: "",
  houseUse: "",
  buildingArea: 0,
  unitsNumber: 0,
  numberFloors: 0,
  note: "",
});

const rules = reactive<FormRules>({
  buildingName: [
    { required: true, message: "请输入楼座名称", trigger: "blur" },
    { min: 2, max: 5, message: "长度在2-5位", trigger: "blur" },
  ],
  completionDate: [
    {
      required: true,
      message: "请选择时间",
      trigger: "blur",
    },
  ],
  houseUse: [
    {
      required: true,
      message: "请输入房屋用途",
      trigger: "change",
    },
  ],
  buildingArea: [
    {
      required: true,
      message: "请输入面积",
      trigger: "blur",
    },
  ],
  unitsNumber: [
    {
      required: true,
      message: "请输入单元数量",
      trigger: "blur",
    },
  ],
  numberFloors: [
    {
      required: true,
      message: "请输入单元楼层数量",
      trigger: "blur",
    },
  ],
});

//提交
let add = () => {
  http({
    url: "/buildingManagement/add",
    method: "POST",
    data: addData,
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      ElMessage({
        message: "新增成功",
        type: "success",
      });
      setTimeout(() => {
        router.push("/home/galleryAdmin");
      }, 1500);
    } else {
      ElMessage.error(data.msg);
    }
  });
};

//返回
let back = () => {
  router.push("/home/galleryAdmin");
};

onMounted(() => {
  // console.log(router.params.data);
});
</script>

<style lang="less" scoped>
.NewArea {
  width: 70%;
  // height: 100%;
  margin: auto;
  .NewArea-tittle {
    margin-top: 20px;
    background-color: white;
    .crumbs {
      padding: 15px 20px;
      font-size: 16px;
      p {
        margin-bottom: 10px;
        span {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
  }
  .NewArea-content {
    padding: 15px 20px;
    margin-top: 20px;
    background-color: white;

    .content-title {
      width: 96%;
      padding-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .add {
      width: 500px;
      margin: auto;
      .el-form-item {
        margin-bottom: 30px;
        position: relative;
        .pos {
          position: absolute;
          top: 0;
          right: 50px;
        }
      }
      .el-input,
      .el-textarea,
      .el-date-picker {
        width: 350px;
      }
    }
  }
}
</style>
